<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Inteyvat</title>
    <base href="/" />
    <meta
      name="description"
      content="Genshin Impact Calculator (English/日本語/繁體中文/简体中文)"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.png" />
    <link rel="apple-touch-icon" href="favicon.png" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&amp;display=swap"
      rel="stylesheet"
    />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link rel="manifest" href="manifest.webmanifest" />
    <meta name="theme-color" content="#fafafa" />
  </head>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-GY4RG5CPMV"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-GY4RG5CPMV');
  </script>
  <!-- Cloudflare Web Analytics -->
  <script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "77db12e0049b4404a674392c073b0ca9"}'></script>
  <!-- Umami Analytics -->
  <script async src="https://umami.sirokuma.cc/script.js" data-website-id="108b2bbf-f0c0-466a-8fa3-79207c601b99"></script>
  <style>
    .loader {
      white-space: pre;
      margin: 0;
      padding: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 10em;
      color: #f5f5f5;
      letter-spacing: 10px;
    }
    .loader:before {
      white-space: pre;
      content: 'Inteyvat';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: #000;
      overflow: hidden;
      -webkit-animation: animate 8s linear infinite;
      animation: animate 8s linear infinite;
      border-right: 3px solid #000;
    }

    @-webkit-keyframes animate {
      0% {
        width: 0;
      }
      50% {
        width: 100%;
      }
      100% {
        width: 0;
      }
    }

    @keyframes animate {
      0% {
        width: 0;
      }
      50% {
        width: 100%;
      }
      100% {
        width: 0;
      }
    }
  </style>
  <script>
    window.addEventListener('beforeinstallprompt', (e) => {
      window.installPop = e;
      if (window.installPopCallBack) {
        window.installPopCallBack();
      }
    });
  </script>
  <body class="mat-typography">
    <app-root>
      <h1 class="loader">Inteyvat</h1>
    </app-root>
    <noscript>Please enable JavaScript to continue using this application.</noscript>
  </body>
</html>
